<template>
  <div class="box">
    <header class="header">
      <div @click="goBack" class="iconfont icon-zuojiantou1"></div>
      <router-link tag="div" to="" class="iconfont icon-sousuo1"><input type="text" v-model="val" autofocus placeholder=" 输入菜谱名、食材名"></router-link>
      <router-link tag="div" to="/search" class="iconfont icon-sousuo"></router-link>
    </header>
    <div class="content">
      <template>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="综合最佳" name="first">
            <figure @click="goDetail(item)" v-for="item of 5" :key="item.id">
              <img src="./../assets/food.jpg" alt="">
              <figcaption>
                <p class="food_name">最美豆腐</p>
                <div>
                  <span class="username">一米阳光</span>
                  <span class="done">12345人做过</span>
                </div>
                <span class="rating">
                  <el-rate
                    v-model="value5"
                    disabled
                    show-score
                    text-color="#ff9900"
                    score-template="{value}分">
                  </el-rate>
                </span>
              </figcaption> 
            </figure>
          </el-tab-pane>
          <!-- <el-tab-pane label="收藏最多" name="second">
            <figure @click="goDetail(item)" v-for="item of greenlist" :key="item.id">
              <img :src="item.greurl" alt="">
              <figcaption>
                <p class="food_name">{{ item.grename }}</p>
                <div>
                  <span class="username">{{ item.username }}</span>
                  <span class="done">12345人做过</span>
                </div>
                <span class="rating">
                  <el-rate
                    v-model="value5"
                    disabled
                    show-score
                    text-color="#ff9900"
                    score-template="{value}分">
                  </el-rate>
                </span>
              </figcaption> 
            </figure>
          </el-tab-pane> -->
          <!-- <el-tab-pane label="做过最多" name="third">
            <figure @click="goDetail(item)" v-for="item of greenlist" :key="item.id">
              <img :src="item.greurl" alt="">
              <figcaption>
                <p class="food_name">{{ item.grename }}</p>
                <div>
                  <span class="username">{{ item.username }}</span>
                  <span class="done">12345人做过</span>
                </div>
                <span class="rating">
                  <el-rate
                    v-model="value5"
                    disabled
                    show-score
                    text-color="#ff9900"
                    score-template="{value}分">
                  </el-rate>
                </span>
              </figcaption> 
            </figure>
          </el-tab-pane> -->
        </el-tabs>
      </template>
    </div>
  </div>
</template>

<script>
// import Prolist from '@/components/Prolist'
import Vue from 'vue'
import { Swipe, SwipeItem, Toast } from 'mint-ui'
// import api from '@/api'
import axios from 'axios'
Vue.use(Swipe, SwipeItem, Toast)
export default {
  data () {
    return {
      greenlist: [],
      val: '',
      activeName: 'first',
      value5: 4.9
    }
  },
  created () {
    const val = sessionStorage.getItem('search')
    this.val = val
    axios.all([this.getGreenList()])
      .then(axios.spread((greenData) => {
        this.greenlist = greenData.data.data
        if(this.greenlist.length === 0) {
          Toast('抱歉，没有搜索到相关数据')
        }
        // console.log(greenData.data.data)
        console.log(this.greenlist)
        
      }))
  },
  methods: {
    search: function (event) {
      var el = event.currentTarget
      this.val = el.innerText
    },
    handleClick(tab, event) {
      console.log(tab, event)
    },
    // getGreenList () {
    //   console.log(111)
    //   return axios.get(`http://10.8.162.81:8082/greens/getGreenByGrename?grename=${this.val}`)
    // },
    goDetail (item) {
      this.$router.push(`/fooddetail?id=${item.id}`)
    },
    goBack () {
      this.$router.go(-1)
      console.log(11)
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/lib/reset.scss';
.header {
  @include flexbox();
  align-items: center;
  justify-content: space-between;
  padding: 0 0.1rem;
  border-bottom: 1px solid #ccc;
  .iconfont {
    input {
      border: 0;
      margin-left: 5px;
      background-color: #F7F7F7;
      width: 90%;
    }
  }
  .icon-fenlei1 {
    @include font-size(0.20rem);
  }
  .icon-sousuo1 {
    background: #F7F7F7;
    padding: 5px 10px;
    width: 85%;
    border-radius: 5px;
    color: #CCCCCC;
    @include font-size(0.15rem);
  }
  .icon-lingdangcopy {
    @include font-size(0.20rem);
  }
}
.content{
  width: 90%!important;
  margin: 0 auto;
  
  .el-tabs__content {
    .el-tab-pane {
      figure {
        display: flex;
        height: 90px;
        margin-bottom: 10px;
        img {
          width: 100px;
          border-radius: 3px;
          margin-right: 10px;
        }
        figcaption {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          justify-content: space-around;
          margin-top: 5px;
          .food_name {
            word-break: normal;
            font-weight: 700;
          }
          .username {
            color: #aaa;
          }
          .done {
            color: rgb(247, 210, 46);
            margin-left: 5px;
          }
          .rating {
            .el-rate {
              display: flex;
              align-items: baseline;
            }
            span {
              color: #222!important;
            }
          }
        }
      }
    }
  }
}
</style>

<style lang="scss">
.el-tabs__nav-scroll {
  width: 100%;
  .el-tabs__nav {
    width: 100%;
    display: flex;
    .el-tabs__item {
      flex: 1;
      text-align: center!important;
    }
  }
}
</style>
